<template>
    <div class="bottom-box">
        <titleComponent title="问题项目数量"></titleComponent>
        <div class="center">
            <div class="center-box" v-for="item, i in list" :key="i">
                <img :src="require(`../../../assets/img/top0${i + 1}.png`)" />
                <div class="name">{{ item.name }}</div>
                <div class="value">{{ item.value }}</div>
            </div>
        </div>
    </div>
</template>
<script>
import titleComponent from "./titleComponent";
export default {
    components: {
        titleComponent,
    },
    watch: {
        question(val, oldVal) {
            if (val !== oldVal) {
                this.list = [
                    { name: "逾期签约项目数", value: val && val.yqPro ? val.yqPro : 0 },
                    { name: "逾期交底项目数", value: val && val.fjPro ? val.fjPro : 0 },
                    { name: "逾期交付项目数", value: val && val.yqJdPro ? val.yqJdPro : 0 },
                    { name: "附件不完整项目数", value: val && val.jtBz ? val.jtBz : 0 },
                    { name: "未按计划计提报账", value: val && val.yqJfPro ? val.yqJfPro : 0 },
                    { name: "未按计划出账计费", value: val && val.czJf ? val.czJf : 0 }
                ]
            }
        }
    },
    props: {
        question: {
            type: Object,
            default: () => { },
        }
    },
    data() {
        return {
            list: [
                { name: "逾期签约项目数", value: this.question && this.question.yqPro ? this.question.yqPro : 0 },
                { name: "逾期交底项目数", value: this.question && this.question.fjPro ? this.question.fjPro : 0 },
                { name: "逾期交付项目数", value: this.question && this.question.yqJdPro ? this.question.yqJdPro : 0 },
                { name: "附件不完整项目数", value: this.question && this.question.jtBz ? this.question.jtBz : 0 },
                { name: "未按计划计提报账", value: this.question && this.question.yqJfPro ? this.question.yqJfPro : 0 },
                { name: "未按计划出账计费", value: this.question && this.question.czJf ? this.question.czJf : 0 }
            ]
        }
    },
}
</script>
<style lang="less" scoped>
.bottom-box {
    background: #fff;
    width: 100%;
    height: 284px;
    margin-bottom: 16px;
    box-sizing: border-box;
    padding: 16px;
}

.center {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 12px;
}

.center-box {
    background: #e4f2fd;
    height: 66px;
    width: calc(50% - 7px);
    margin-bottom: 12px;
    position: relative;

    img {
        position: absolute;
        top: 0;
        left: 0;
    }

    .name {
        text-align: center;
        width: 100%;
        height: 35px;
        line-height: 35px;
        background: #f0f7fd;
        padding-left: 32px;
        box-sizing: border-box;
    }

    .value {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        width: 100%;
        color: #1e2839;
        line-height: 30px;
    }
}
</style>